<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { getUserSourceStatistics } from '#/api/home';

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

onMounted(() => {
  getUserSourceStatistics({}).then((res) => {
    const data = res.map((item: any) => ({
      name: item.title,
      value: item.count,
    }));
    renderEcharts({
      series: [
        {
          animationDelay() {
            return Math.random() * 400;
          },
          animationEasing: 'exponentialInOut',
          animationType: 'scale',
          center: ['50%', '50%'],
          color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
          data: data.sort((a, b) => {
            return a.value - b.value;
          }),
          name: '用户来源',
          radius: '80%',
          roseType: 'radius',
          type: 'pie',
        },
      ],

      tooltip: {
        trigger: 'item',
      },
    });
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" />
</template>
